<template>
  <XtxBread>
    <XtxBreadItem to="/">首页</XtxBreadItem>
    <XtxBreadItem
      v-if="breadObj.parentObj"
      :to="'/category/' + breadObj.parentObj.id"
      >{{ breadObj.parentObj.name }}</XtxBreadItem
    >
    <XtxBreadItem v-if="breadObj.localObj">{{
      breadObj.localObj.name
    }}</XtxBreadItem>
  </XtxBread>
</template>
<script>
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { computed } from 'vue'
export default {
  name: 'SubBread',
  setup () {
    //  id   list
    // const breadObj = {
    //   parentObj: {
    //     name: '居家',
    //     id: '100'
    //   },
    //   localObj: {
    //     name: '水具',
    //     id: '100100'
    //   }
    // }
    const store = useStore()
    const route = useRoute()
    const breadObj = computed(() => {
      let temp = {}
      // store.state.category.list  route.params.id
      store.state.category.list.forEach(item => {
        if (item.children) {
          item.children.forEach(item2 => {
            if (item2.id === route.params.id) {
              temp = {
                parentObj: {
                  name: item.name,
                  id: item.id
                },
                localObj: {
                  name: item2.name,
                  id: item2.id
                }
              }
            }
          })
        }
      })
      return temp
    })
    return { breadObj }
  }
}
</script>
<style scoped lang="less"></style>
